<template>
  <view class="container">
    <!-- 标题栏 -->
    <view class="header">
      <text class="back-arrow" @tap="goBack">←</text>
      <text class="header-title">哲学练习题</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 进度条 -->
      <view class="progress-bar">
        <view class="progress-filled" :style="{ width: progressWidth + '%' }"></view>
      </view>
      
      <!-- 题目信息 -->
      <view class="question-info">
        <text class="question-count">题目 {{ currentQuestionIndex }}/{{ totalQuestions }}</text>
        <text class="chapter-title">{{ currentChapter }}</text>
      </view>
      
      <!-- 题目卡片 -->
      <view class="question-card">
        <text class="question-text">{{ currentQuestion.question }}</text>
        
        <!-- 选项列表 -->
        <view 
          v-for="(option, index) in currentQuestion.options" 
          :key="index" 
          class="option-item"
          :class="{ selected: selectedOption === index }"
          @tap="selectOption(index)"
        >
          <text class="option-text">{{ optionLabels[index] }}. {{ option }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="favorite-button" @tap="toggleFavorite">
          <text class="button-text">收藏本题</text>
        </view>
        <view class="next-button" @tap="nextQuestion">
          <text class="button-text">下一题</text>
        </view>
      </view>
      
      <!-- 题目进度指示器 -->
      <view class="question-dots">
        <view 
          v-for="(dot, index) in questionStatus" 
          :key="index" 
          class="question-dot"
          :class="getQuestionDotClass(dot)"
        ></view>
      </view>
    </view>
    
    <!-- 底部工具栏 -->
    <view class="toolbar">
      <view class="tool-item" @tap="viewAnalysis">
        <text class="tool-text">解析</text>
        <text class="tool-text">查看</text>
      </view>
      <view class="tool-item" @tap="viewAnswerCard">
        <text class="tool-text">答题</text>
        <text class="tool-text">卡片</text>
      </view>
      <view class="tool-item" @tap="viewChapterList">
        <text class="tool-text">章节</text>
        <text class="tool-text">目录</text>
      </view>
      <view class="tool-item" @tap="viewWrongQuestions">
        <text class="tool-text">错题</text>
        <text class="tool-text">集</text>
      </view>
      <view class="tool-item" @tap="submitAnswer">
        <text class="tool-text">提交</text>
        <text class="tool-text">答案</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 数据
const currentQuestionIndex = ref(2);
const totalQuestions = ref(6);
const currentChapter = ref('1.1 哲学的基本问题');
const selectedOption = ref(null);
const isFavorite = ref(false);

// 选项标签
const optionLabels = ['A', 'B', 'C', 'D', 'E', 'F'];

// 问题状态: correct, wrong, current, unanswered
const questionStatus = ref(['correct', 'current', 'unanswered', 'unanswered', 'unanswered', 'unanswered']);

// 当前题目
const currentQuestion = ref({
  question: '根据马克思主义哲学，思维和存在的关系问题包含哪两个基本方面？',
  options: [
    '物质和意识的对立、物质和运动的关系',
    '本体论问题和认识论问题',
    '唯物主义和唯心主义的对立',
    '可知论和不可知论的分歧'
  ],
  correctAnswer: 1 // 索引从0开始，对应B选项
});

// 计算进度条宽度
const progressWidth = computed(() => {
  return (currentQuestionIndex.value / totalQuestions.value) * 100 / 3; // 只填充1/3的进度条
});

// 选择选项
const selectOption = (index) => {
  selectedOption.value = index;
};

// 获取问题点的样式类
const getQuestionDotClass = (status) => {
  if (status === 'correct') return 'dot-correct';
  if (status === 'wrong') return 'dot-wrong';
  if (status === 'current') return 'dot-current';
  return 'dot-unanswered';
};

// 切换收藏状态
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  console.log(`题目${currentQuestionIndex.value}收藏状态: ${isFavorite.value}`);
};

// 下一题
const nextQuestion = () => {
  if (currentQuestionIndex.value < totalQuestions.value) {
    currentQuestionIndex.value++;
    selectedOption.value = null;
    
    // 这里可以加载下一题的内容
    console.log('加载下一题');
  }
};

// 返回上一页
const goBack = () => {
  console.log('返回上一页');
  // uni.navigateBack();
};

// 查看解析
const viewAnalysis = () => {
  console.log('查看解析');
};

// 查看答题卡
const viewAnswerCard = () => {
  console.log('查看答题卡');
};

// 查看章节目录
const viewChapterList = () => {
  console.log('查看章节目录');
};

// 查看错题集
const viewWrongQuestions = () => {
  console.log('查看错题集');
};

// 提交答案
const submitAnswer = () => {
  console.log('提交答案');
  if (selectedOption.value === currentQuestion.value.correctAnswer) {
    console.log('回答正确');
    // 更新问题状态
    questionStatus.value[currentQuestionIndex.value - 1] = 'correct';
  } else {
    console.log('回答错误');
    // 更新问题状态
    questionStatus.value[currentQuestionIndex.value - 1] = 'wrong';
  }
};

onMounted(() => {
  console.log('题目页面加载完成');
});
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #A8BF8F;
  padding: 40rpx 20rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.back-arrow {
  font-size: 40rpx;
  color: white;
  position: absolute;
  left: 20rpx;
}

.header-title {
  flex: 1;
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  text-align: center;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.progress-bar {
  width: 100%;
  height: 16rpx;
  background-color: #e0e0e0;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.progress-filled {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 8rpx;
}

.question-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.question-count {
  font-size: 28rpx;
  color: #666;
}

.chapter-title {
  font-size: 28rpx;
  color: #666;
}

.question-card {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.question-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
  line-height: 1.5;
}

.option-item {
  background-color: #f9f9f9;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.option-item.selected {
  border-color: #4C84FF;
  background-color: rgba(76, 132, 255, 0.1);
}

.option-text {
  font-size: 30rpx;
  color: #333;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.favorite-button, .next-button {
  width: 48%;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.favorite-button {
  background-color: #FF9AA2;
}

.next-button {
  background-color: #4C84FF;
}

.button-text {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
}

.question-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}

.question-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  margin: 0 10rpx;
  border: 2rpx solid white;
}

.dot-correct {
  background-color: #4CAF50;
}

.dot-wrong {
  background-color: #FF6B6B;
}

.dot-current {
  background-color: #4C84FF;
}

.dot-unanswered {
  background-color: #e0e0e0;
}

.toolbar {
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding: 16rpx 0;
  border-top: 2rpx solid #e0e0e0;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx;
}

.tool-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.2;
}
</style>